<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper.min.css">

    <style>
        #swiper {
            border: 1px solid red;
        }

        .none {
            display: none;
        }

        .swiper-slide-active {
            border: 4px solid transparent;
            border-radius: 8px;
            background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
            color: #fff;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
        }

        .swiper-slide {
            border: 4px solid transparent;
        }

        .slideView {
            background-image: url("./200x200.jpg");
            position: relative;
            background-size: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            position: relative;
            height: 90px;
        }

        .slideView .coverView {
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
        }

        .slideView .levelTextView {
            color: #fff;
            font-size: 1.3rem;
            position: absolute;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <button id="addBtn">add</button>
    <p id="num"></p>
    <div class="none">
        <!-- 需要拷贝的slider -->
        <div id="copySlider" class="slideView">
            <div class="coverView"></div>
            <!-- p 等级text显示 -->
            <p class="levelTextView"></p>
        </div>
    </div>
    <div class="swiper-container" id="swiper">
        <div class="swiper-wrapper">
        </div>
    </div>
</body>

</html>
<script src="./swiper/swiper.min.js"></script>
<script>

    /***
     * 
     * nowIndexProxy 为响应式数据
     * 
     * **/
    let data = [{ "id": 3, "gameId": 3, "level": 1, "name": "1-1", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 4, "_aEnemySpawnTime": 2000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-21 23:34:36", "userProgress": { "pass": true, "bestScore": 23691 } }, { "id": 4, "gameId": 3, "level": 2, "name": "1-2", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 14, "_aEnemySpawnTime": 1800 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:49:50", "userProgress": { "pass": true, "bestScore": 11000 } }, { "id": 5, "gameId": 3, "level": 3, "name": "2-1", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 2, "name": "LV2" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 18, "_aEnemySpawnTime": 1600 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:51:45", "userProgress": { "pass": true, "bestScore": 14103 } }, { "id": 6, "gameId": 3, "level": 4, "name": "2-2", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 2, "name": "LV2" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 24, "_aEnemySpawnTime": 1400 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:51:50", "userProgress": { "pass": true, "bestScore": 17005 } }, { "id": 7, "gameId": 3, "level": 5, "name": "1-5", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 30, "_aEnemySpawnTime": 1200 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:13", "userProgress": { "pass": true, "bestScore": 18188 } }, { "id": 8, "gameId": 3, "level": 6, "name": "1-6", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 40, "_aEnemySpawnTime": 1100 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:20", "userProgress": { "pass": true, "bestScore": 35051 } }, { "id": 9, "gameId": 3, "level": 7, "name": "1-7", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 40, "_aEnemySpawnTime": 1100 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:26", "userProgress": { "pass": true, "bestScore": 34892 } }, { "id": 10, "gameId": 3, "level": 8, "name": "1-8", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 50, "_aEnemySpawnTime": 1000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:29", "userProgress": { "pass": true, "bestScore": 40889 } }, { "id": 11, "gameId": 3, "level": 9, "name": "1-9", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 55, "_aEnemySpawnTime": 1000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:33", "userProgress": { "pass": true, "bestScore": 43520 } }, { "id": 12, "gameId": 3, "level": 10, "name": "1-10", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 65, "_aEnemySpawnTime": 900 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:36", "userProgress": { "pass": true, "bestScore": 37820 } }, { "id": 13, "gameId": 3, "level": 11, "name": "1-11", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 75, "_aEnemySpawnTime": 800 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:42", "userProgress": { "pass": true, "bestScore": 43844 } }, { "id": 14, "gameId": 3, "level": 12, "name": "1-12", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 90, "_aEnemySpawnTime": 700 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:47", "userProgress": { "pass": true, "bestScore": 70414 } }]

    let childrenData = ([{ "parent": { "id": 1, "name": "LV1" }, "children": [{ "id": 3, "gameId": 3, "level": 1, "name": "1-1", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 4, "_aEnemySpawnTime": 2000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-21 23:34:36", "userProgress": { "pass": true, "bestScore": 23691 } }, { "id": 4, "gameId": 3, "level": 2, "name": "1-2", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 14, "_aEnemySpawnTime": 1800 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:49:50", "userProgress": { "pass": true, "bestScore": 11000 } }, { "id": 7, "gameId": 3, "level": 5, "name": "1-5", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 30, "_aEnemySpawnTime": 1200 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:13", "userProgress": { "pass": true, "bestScore": 18188 } }, { "id": 8, "gameId": 3, "level": 6, "name": "1-6", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 40, "_aEnemySpawnTime": 1100 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:20", "userProgress": { "pass": true, "bestScore": 35051 } }, { "id": 9, "gameId": 3, "level": 7, "name": "1-7", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 40, "_aEnemySpawnTime": 1100 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:50:26", "userProgress": { "pass": true, "bestScore": 34892 } }, { "id": 10, "gameId": 3, "level": 8, "name": "1-8", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 50, "_aEnemySpawnTime": 1000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:29", "userProgress": { "pass": true, "bestScore": 40889 } }, { "id": 11, "gameId": 3, "level": 9, "name": "1-9", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 55, "_aEnemySpawnTime": 1000 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:33", "userProgress": { "pass": true, "bestScore": 43520 } }, { "id": 12, "gameId": 3, "level": 10, "name": "1-10", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 65, "_aEnemySpawnTime": 900 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:36", "userProgress": { "pass": true, "bestScore": 37820 } }, { "id": 13, "gameId": 3, "level": 11, "name": "1-11", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 75, "_aEnemySpawnTime": 800 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:42", "userProgress": { "pass": true, "bestScore": 43844 } }, { "id": 14, "gameId": 3, "level": 12, "name": "1-12", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 1, "name": "LV1" }, "balanceRatio": 0, "_aEnemiesToSpawn": 90, "_aEnemySpawnTime": 700 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-19 21:53:47", "userProgress": { "pass": true, "bestScore": 70414 } }] }, { "parent": { "id": 2, "name": "LV2" }, "children": [{ "id": 5, "gameId": 3, "level": 3, "name": "2-1", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 2, "name": "LV2" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 18, "_aEnemySpawnTime": 1600 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:51:45", "userProgress": { "pass": true, "bestScore": 14103 } }, { "id": 6, "gameId": 3, "level": 4, "name": "2-2", "difficulty": 1, "duration": 20000, "config": { "parent": { "id": 2, "name": "LV2" }, "enemiesMap": [[{ "enemyType": 3, "marginLeftRatio": 20 }, { "enemyType": 4, "marginLeftRatio": 60 }], [{ "enemyType": 1, "marginLeftRatio": 10 }, { "enemyType": 2, "marginLeftRatio": 50 }]], "balanceRatio": 0, "_aEnemiesToSpawn": 24, "_aEnemySpawnTime": 1400 }, "deleted": 0, "createdAt": "2023-02-15 15:35:57", "updatedAt": "2023-03-22 05:51:50", "userProgress": { "pass": true, "bestScore": 17005 } }] }]);
    console.log(data);
    // DOM
    let addBtn = document.getElementById("addBtn"), pNum = document.getElementById("num"), wrapperDom = document.getElementsByClassName("swiper-wrapper")[0], copySliderDom = document.getElementById('copySlider');
    // proxy - data


    class Dep {
        constructor() {
            this.subArr = [];
        }
        add(sub) {
            console.log("新增被观察者");
            if (this.subArr.findIndex(e => e == sub) == -1) {
                this.subArr.push(sub);
            }
        }
        notify() {
            // 执行
            console.log("当前观察队列--", this.subArr);
            this.subArr.forEach(e => {
                console.log(e, '执行')
                e.update();
            })
        }
    };

    class Watcher {
        constructor(key, cb) {
            this.key = key;
            this.cb = cb;
            // 添加属性指向this
            Dep.target = this;
        }

        update() {
            // 更新时
            console.log(nowIndexProxy, "哥们检测到更新了")
            this.cb(nowIndexProxy[this.key])
        }
    };

    let nowIndex = {
        num: 3
    };

    let dep = new Dep();
    let handler = {
        get: function (target, key, receiver) {
            console.log("get---", target, '--', key, '---', receiver, '--- V -', target[key]);
            // 渲染DOM
            Dep.target && dep.add(Dep.target);
            pNum.innerText = target[key];
            return target[key];
        },
        set: function (target, key, newValue, receiver) {
            target[key] = newValue;
            console.log("set---", target[key]);
            console.log(Dep.target, 'Dep.target');
            if (Dep.target == undefined) {
                new Watcher(key, () => { });
            };
            Dep.target && dep.add(Dep.target);
            pNum.innerText = target[key];
            // 重设置时全局广播
            dep.notify();
            return true;
        }
    };
    let nowIndexProxy = new Proxy(nowIndex, handler);
    // 初始化proxy

    nowIndexProxy.num = 2;

    let addEvent = function () {
        nowIndexProxy.num++;
        // console.log(nowIndexProxy.num);
    };
    addBtn.addEventListener("click", addEvent);

    // 处理swiper DOM
    function makeSlideView() {
        data.forEach((e, i) => {
            let needPushSliderDom = copySliderDom.cloneNode(true);
            needPushSliderDom.id = '';
            let sliderView = document.createElement("div");
            sliderView.setAttribute("class", 'swiper-slide');
            needPushSliderDom.childNodes[5].innerText = e.name;
            sliderView.appendChild(needPushSliderDom);
            wrapperDom.appendChild(sliderView);
        });
    };
    makeSlideView();

    let levelSwiper = new Swiper('#swiper', {
        autoplay: false,//可选选项，自动滑动
        slidesPerView: 5,
        centeredSlides: true,
        spaceBetween: 20,
        initialSlide: nowIndexProxy.num
    });
    const swiperSlideChangeEvent = function () {
        nowIndexProxy.num = this.activeIndex;
    };
    levelSwiper.on("slideChange", swiperSlideChangeEvent);




    
    let watcher = new Watcher('num', function (e) {
        console.log(111, levelSwiper, e, '检测到后的值');
        levelSwiper.slideTo(e);
    });



</script>